<template>
    <div class="login-wrap">
        <div class="XZS_Box">
          <div class="XZS_Logo"> 
            <img src="static/img/Logo.png" alt="">
          </div>
          <div class="XZS_content">
            <div class="XZS_left_img">
              <img src="static/img/imgs.png" alt="">
            </div>
            <div class="XZS_right_Login">
              <div class="Login_Title">
                <p>登录</p>
              </div>
              <div class="Login_inp">
                <div :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                  
                  <p>
                    <span>手机号：</span>
                    <input type="text" class="el_inp" v-model="ruleForm.phone" placeholder="请输入手机号" ref="navbar">
                  </p>
                  <p>
                    <span>登录密码：</span>
                    <input type="password" class="el_inp" v-model="ruleForm.password" placeholder="请输入密码" ref="navbar">
                  </p>
                  <button class="login-btn"  @click="submitForm"> 登录 </button>
                </div>
              <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                  <p>
                    <span>手机号：</span>
                    <input type="text" class="el_inp" v-model="ruleForm.phone" placeholder="请输入手机号" ref="navbar">
                  </p>
                  <p>
                    <span>登录密码：</span>
                    <input type="password" class="el_inp" v-model="ruleForm.password" placeholder="请输入密码" ref="navbar">
                  </p>
                  <button class="login-btn"  @click="submitForm('ruleForm')"> 登录 </button>
              </el-form> -->
              </div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
export default {
  data: function() {
    return {
      ruleForm: {
        phone: "13520575185",
        password: "123456"
      },  
      rules: {
        phone: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      }
    };  
  },
  created() {
  },
  methods: {
    
    submitForm() {
      var that = this;
      this.url = "/api/login";
      // this.$refs[formName].validate(valid => {
        // if (valid) {
          this.$axios({
            url: this.url,
            method: "post",
            data: { 
              mobile: that.ruleForm.phone,
              password: that.ruleForm.password
            },
            transformRequest: [ 
              function(data) {
                let ret = "";
                for (let it in data) {
                  ret += encodeURIComponent(it) +
                    "=" +
                    encodeURIComponent(data[it]) +
                    "&";
                }
                ret = ret.substr(0, ret.length - 1);
                return ret;
              }
            ]
          }).then(res => {
                that.url = "/api/user/xzs/organizationManager.login";
                that.$axios({
                  url: that.url,
                  method: "post",
                  data: {}
                }).then(data => {
                  if(data.data.errorCode == "100002"){
                      this.$message({
                      showClose: true,
                      message:"用户非管理员",   
                      type: "warning"
                    });
                    return false
                  }
                  if(res.data == "SUCCESS"){
                    this.$message({
                      showClose: true,
                      message:"登录成功", 
                      type: "success"
                    });
                    this.$router.push("/home/dashboard");
                    localStorage.setItem("ms_username", this.ruleForm.phone);
                  }
                })
            }).catch(error => {
              console.log(error.response.data.message);
                this.$message({
                  showClose: true,
                  message:error.response.data.message,   
                  type: "error"
                });
            });
          } 
      // });
    // }
  }
};
</script>
<style scoped>
.login-wrap {
  width: 100vw;
  height: 100vh;
  float: left;
  overflow: hidden;
}
.XZS_Box{
  width: 100vw;
  height:9vh;
  background:white;
}
.XZS_Logo{
  width: 100vw;
  height:8vh;
  float: left;
}
.XZS_Logo img{
  float: left;
  width: 4.7vw;
  height: 4.6vh;
  margin-top:1.6vh; 
  margin-left: 3vw;
}
.XZS_content{
  float: left;
  width: 100vw;
  height: 91vh;
  background: #70dbf9;
}
.XZS_left_img{
  float: left;
  width: 30.7vw;
  height: 46.9vh;
  margin-left: 17.7vw;
  margin-top: 18.6vh;
}
.XZS_left_img img{
  float: left;
  width: 30.7vw;
  height: 46.9vh;

}

.XZS_right_Login{
  float:right;
  width:31.2vw;
  height:54.1vh;
  margin-top: 13.1vh;
  margin-right: 10.6vw;
  background:rgba(255,255,255,1);
  border:1px solid rgba(255,255,255,1);
  border-radius:12px;
}

.Login_Title{
  width:29vw;
  float: left;
  margin-left: 1.1vw;
  height: 7.4vh;
  border-bottom: 1px solid rgba(178,178,178,1);
}
.Login_Title p{
  font-family:PingFang-SC-Regular;
  font-size:1.4vw;
  text-align:center;
  line-height:7.4vh;
}

.Login_inp{
  float: left;
  width:29vw;
  height: 6.5vh;
  margin-left: 1.1vw;
}
.demo-ruleForm{
  float: left;
  width:25vw;
  margin-left: 2vw;
}
.demo-ruleForm p{
  margin-top: 5vh;
  float: left;
  width:25vw;
}
.demo-ruleForm p span{
  float: left;
  width:25vw;
  font-size: 1.1vw;
  color:rgba(131,127,127,1);

}
.demo-ruleForm p input{
  float: left;
  width:23.3vw;
  height:6.5vh;
  font-size: 1vw;  
  text-indent: 1vw;
  color:rgba(131,127,127,1);
  border:1px solid rgba(178,178,178,1);
  border-radius:.6vw;
  margin-top: 1vh;
  outline: none;
}
.login-btn {
  float: left;
  width:23.5vw;
  height:6.5vh;
  margin-top: 3vh;
  background: rgb(255, 204, 51);
  border-radius:.6vw;
  text-align: center;
  font-size:1.4vw;
  font-family:MicrosoftYaHei;
  font-weight:400;
  color:rgba(255,255,255,1);
  line-height:6vh;
  cursor:pointer;
  border:.1vw solid rgb(255, 204, 51);
  outline: none;
} 




</style>
